<template>
  <view v-show="show" class="canvas-area-wrap">
    <view class="canvas-area">
      <view class="canvas">
        <canvas class="class" canvas-id="posters" />
        <image :show-menu-by-longpress="true" :src="tempFilePath" />
      </view>
      <view class="canvas-area__close" @tap="close">
        <image :src="CLOSED" />
      </view>
    </view>

    <view class="canvas-operation">
      <image :src="LONG_TIME_PRESS_ICON" />
      <!-- <view class="canvas-operation__save" @tap="()=>{ saveImage() }">
        <text>保存到相册</text>
      </view>
      <view class="canvas-operation__share">
        <text>分享得花瓣</text>
      </view>-->
    </view>
  </view>
</template>


<script>
import { CLOCK_INVITING_BGI, USER_IMG, QR_CODE, RIGHT_ARROWS, CLOCK_SIGN_BGI, CLOCK_OVER_BGI, CLOCK_OVER_NUMBER_BOX, CLOSED, OVER_SIGN, CLOCK_INVITING, CLOCK_SIGN, LONG_TIME_PRESS_ICON } from '@/config/clock-in'
import Taro from "@tarojs/taro"
import mixins from './mixins'
import { IMAGE_CDN } from "@/config/index.ts";
/* 分享白色背景 */
const INVITING_WHITE_BGI = 'https://xthk-edu-test.oss-cn-shenzhen.aliyuncs.com/1610175211466_0.6618584942336194'
export default {
  mixins: [mixins],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    inviteData: {
      type: Object,
      default: () => { return {} },
    }
  },
  data () {
    return {
      CLOCK_INVITING_BGI, USER_IMG, QR_CODE, RIGHT_ARROWS, CLOCK_SIGN_BGI, CLOCK_OVER_BGI, CLOCK_OVER_NUMBER_BOX, CLOSED, OVER_SIGN, CLOCK_INVITING, CLOCK_SIGN, LONG_TIME_PRESS_ICON,
      tempFilePath: '',
      canvasId: 'posters'
    }
  },
  watch: {
    show (n) {
      console.log(n)
      n && this.ci()
      !n && Taro.hideLoading()
    }
  },
  /* lineFeed: true, 文本是否换行
     lineFeedWidth: 532, 文本换行宽度
     lineHeight: 48 文本行高  */
  methods: {
    canvasToImage () {
      Taro.canvasToTempFilePath({ // 调用小程序API对canvas转换成图
        x: 0, // 开始截取的X轴
        y: 0, // 开始截取的Y轴
        width: 644, // 开始截取宽度
        height: 902,  // 开始截取高度
        destWidth: 644 * 2,  // 截取后图片的宽度（避免图片过于模糊，建议2倍于截取宽度）
        destHeight: 902 * 2, // 截取后图片的高度（避免图片过于模糊，建议2倍于截取宽度）
        canvasId: 'posters', // 截取的canvas对象
        success: (res) => { // 转换成功生成临时链接并调用保存方法
          console.log(res.tempFilePath, 'this.tempFilePath')
          this.tempFilePath = res.tempFilePath
        },
        fail: function (res) {
          console.log(res)

        },
        complete: () => {
          Taro.hideLoading()
        }
      }, this.$scope)
    },
    ci () {
      console.log('dsjagduis', this.inviteData)
      Taro.showLoading({ title: '海报加载中' })
      const { invite_background_img, avatar, nick_name, invite_title, activity_title, qr_code } = this.inviteData
      let invitingCanvasData = [
        { type: 'image', value: invite_background_img, dWidth: 644, dHeight: 902 },
        { type: 'image', value: INVITING_WHITE_BGI, position: [24, 40], dWidth: 596, dHeight: 830 },
        { type: 'image', value: avatar, position: [56, 206], dWidth: 80, dHeight: 80, radius: true },
        { type: 'text', value: nick_name, position: [160, 226], fontSize: 28, color: '#303133' },
        { type: 'text', value: invite_title, position: [56, 310], fontSize: 32, color: '#000000', lineFeed: true, lineFeedWidth: 532, lineHeight: 48 },
        { type: 'text', value: activity_title, position: [116, 470], fontSize: 24, color: '#909399', centerX: true },
        { type: 'image', value: qr_code, position: [202, 552], dWidth: 240, dHeight: 240 },
      ]
      this.drawCanvas(invitingCanvasData)
    },

  }
}
</script>

